<template>
	<view class="content">
		<view class="header" :style="{'height':statusBarHeight+'px'}">
			<view class="navon" :style="{'height':statusBarHeight+'px','padding-top':statusBarHeight1+'px'}">
				<view class="header-back" @click="goBack()">
					<i class="iconfont" style="font-size: 20px;">&#xe605</i>
				</view>
				<view class="hearder-content">
					排行榜
				</view>
			</view>
		</view>
		<view style="flex: 1;">
			<view class="tab">
				<view class="tabs">
					<view v-for="(item, index) in tablist" :key="index" class="tabs-1"
						:class="{ 'active': isSelected === index }" @click="selectTab(index)">
						{{ item.name }}
					</view>
				</view>
				<view class="text">
					<view class="con">
						月榜
					</view>
					<view class="time" @click="pickerShow = true">
						<image src="https://pw.qyang.cc/static/icon-time_01.png" mode="aspectFill"></image> 时间筛选
					</view>
				</view>
				<view class="card" v-if="isSelected===0">
					<view class="title">
						<image class="bg-image" src="https://pw.qyang.cc/static/bg-ranking.png" mode="aspectFit">
						</image>
						<view class="rank second-rank" v-if="secondUser.id || secondUser.user_id">
							<image class="ranking-image" src="https://pw.qyang.cc/static/ranking2.png" mode=""></image>
							<view class="avator">
								<image :src="rq.imgUrl(secondUser.user?secondUser.user.avatar:'')" mode="aspectFill">
								</image>
							</view>
							<view class="name">{{secondUser.user?secondUser.user.nickname:''}}</view>
							<view class="money">{{secondUser.total?secondUser.total:0}} <span
									style="font-size: 10px;">元</span></view>
						</view>
						<view class="rank second-rank" style="width: 120rpx;" v-else></view>
						<view class="rank top-rank" v-if="firstUser.id || firstUser.user_id ">
							<image class="ranking-image" src="https://pw.qyang.cc/static/ranking1.png"
								mode="aspectFill"></image>
							<view class="avator">
								<image :src="rq.imgUrl(firstUser.user?firstUser.user.avatar:'')" mode="aspectFill">
								</image>
							</view>
							<view class="name">{{firstUser.user?firstUser.user.nickname:''}}</view>
							<view class="money">{{firstUser.total?firstUser.total:0}} <span
									style="font-size: 10px;">元</span></view>
						</view>
						<view class="rank third-rank" v-if="thirdUser.id || thirdUser.user_id">
							<image class="ranking-image" src="https://pw.qyang.cc/static/ranking3.png" mode=""></image>
							<view class="avator">
								<image :src="rq.imgUrl(thirdUser.user?thirdUser.user.avatar:'')" mode="aspectFill">
								</image>
							</view>
							<view class="name">{{thirdUser.user?thirdUser.user.nickname:''}}</view>
							<view class="money">{{thirdUser.total?thirdUser.total:0}} <span
									style="font-size: 10px;">元</span></view>
						</view>
					</view>
					<view class="box">
						<!-- 显示其余排名的用户 -->
						<scroll-view class="scroll" direction="vertical" @scrolltolower="scrolltolower">
							<view class="other-rank" v-for="(item, index) in otherUserList" :key="index">
								<view class="index">
									{{index + 4}}
								</view>
								<view class="avator">
									<image :src="rq.imgUrl(item.user.avatar)" mode="aspectFill"></image>
								</view>
								<view class="right">
									<view class="l1">
										<view>{{item.user.nickname}}</view>
										<view class="l1-sex1" v-if="item.user.gender == 1">
											<image src="https://pw.qyang.cc/static/sexW.png"
												style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
											{{item.user.age?item.user.age:0}}
										</view>
										<view class="l1-sex2" v-if="item.user.gender == 0">
											<image src="https://pw.qyang.cc/static/sexM.png"
												style="width: 20rpx;height: 20rpx; margin-right: 10rpx;"></image>
											{{item.user.age?item.user.age:0}}
										</view>
										<view class="city">{{item.user.city?item.user.city:''}}</view>
										<view class="money">{{item.total}}<span style="font-size: 10px;">元</span>
										</view>
									</view>
									<view v-if="item.user.ptpj" class="l2">
										<span
											style="font-size: 14px;color: #FF6C91;letter-spacing: 0px;margin-right: 10rpx;">Miss:</span>{{item.user.ptpj}}
									</view>
									<view v-else-if="item.user.bio" class="l2">
										<span
											style="font-size: 14px;color: #FF6C91;letter-spacing: 0px;margin-right: 10rpx;"></span>{{item.user.bio}}
									</view>
									<view v-else class="l2">
										TA很懒，什么也没有留下
									</view>
									<view class="user-tabs"
										v-if="item.user && item.user.task && item.user.task.length>0">
										<view class="tabs-item" v-for="i,a in item.user.task" :key="a"
											:style="{background:i.color}">
											{{i.name}}
										</view>
									</view>
								</view>

							</view>
						</scroll-view>
					</view>
				</view>
				<view class="card" v-if="isSelected===1">
					<view class="title">
						<image class="bg-image" src="https://pw.qyang.cc/static/bg-ranking.png" mode="aspectFit">
						</image>
						<view class="rank second-rank" v-if="secondUser.id || secondUser.user_id ">
							<image class="ranking-image" src="https://pw.qyang.cc/static/ranking2.png" mode=""></image>
							<view class="avator">
								<image :src="rq.imgUrl(secondUser.avatar)" mode="aspectFill"></image>
							</view>
							<view class="name">{{secondUser.nickname}}</view>
							<view class="money">{{secondUser.grade?secondUser.grade:0}} <span
									style="font-size: 10px;">分</span></view>
						</view>
						<view class="rank second-rank" style="width: 120rpx;" v-else></view>
						<view class="rank top-rank" v-if="firstUser.id || firstUser.user_id ">
							<image class="ranking-image" src="https://pw.qyang.cc/static/ranking1.png" mode=""></image>
							<view class="avator">
								<image :src="rq.imgUrl(firstUser.avatar)" mode="aspectFill"></image>
							</view>
							<view class="name">{{firstUser.nickname}}</view>
							<view class="money">{{firstUser.grade?firstUser.grade:0}} <span
									style="font-size: 10px;">分</span></view>
						</view>
						<view class="rank third-rank" v-if="thirdUser.id">
							<image class="ranking-image" src="https://pw.qyang.cc/static/ranking3.png" mode=""></image>
							<view class="avator">
								<image :src="rq.imgUrl(thirdUser.avatar)" mode="aspectFill"></image>
							</view>
							<view class="name">{{thirdUser.nickname}}</view>
							<view class="money">{{thirdUser.grade?thirdUser.grade:0}} <span
									style="font-size: 10px;">分</span></view>
						</view>
					</view>
					<view class="box">
						<!-- 显示其余排名的用户 -->
						<scroll-view class="scroll" direction="vertical" @scrolltolower="scrolltolower">
							<view class="other-rank" v-for="(item, index) in otherUserList" :key="index">
								<view class="index">
									{{index + 4}}
								</view>
								<view class="avator">
									<image :src="rq.imgUrl(item.avatar)" mode="aspectFill"></image>
								</view>
								<view class="right">
									<view class="l1">
										<view>{{item.nickname}}</view>
										<view class="l1-sex1" v-if="item.gender == 1">
											<image src="https://pw.qyang.cc/static/sexW.png"
												style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
											{{item.age?item.age:0}}
										</view>
										<view class="l1-sex2" v-if="item.gender == 0">
											<image src="https://pw.qyang.cc/static/sexM.png"
												style="width: 20rpx;height: 20rpx; margin-right: 10rpx;"></image>
											{{item.age?item.age:0}}
										</view>
										<view class="city">{{item.city?item.city:''}}</view>
										<view class="money">{{item.grade}}<span style="font-size: 10px;">分</span>
										</view>
									</view>
									<view v-if="item.ptpj" class="l2">
										<span
											style="font-size: 14px;color: #FF6C91;letter-spacing: 0px;margin-right: 10rpx;">Miss:</span>{{item.ptpj}}
									</view>
									<view v-else-if="item.bio" class="l2">
										{{item.bio}}
									</view>
									<view v-else class="l2">
										TA很懒，什么也没有留下
									</view>
									<view class="user-tabs" v-if="item.task&&item.task.length>0">
										<view class="tabs-item" v-for="i,a in item.task" :key="a"
											:style="{background:i.color}">
											{{i.name}}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="card" v-if="isSelected===2">
					<view class="title">
						<image class="bg-image" src="https://pw.qyang.cc/static/bg-ranking.png" mode="aspectFill">
						</image>
						<view class="rank second-rank" v-if="secondUser.id || secondUser.user_id">
							<image class="ranking-image" src="https://pw.qyang.cc/static/ranking2.png" mode=""></image>
							<view class="avator">
								<image :src="rq.imgUrl(secondUser.user?secondUser.user.avatar:'')" mode="aspectFill">
								</image>
							</view>
							<view class="name">{{secondUser.user?secondUser.user.nickname:''}}</view>
							<view class="money">{{secondUser.total?firstUser.total:0}} <span
									style="font-size: 10px;">元</span></view>
						</view>
						<view class="rank second-rank" style="width: 120rpx;" v-else></view>
						<view class="rank top-rank" v-if="(firstUser.id || firstUser.user_id) && firstUser.user">
							<image class="ranking-image" src="https://pw.qyang.cc/static/ranking1.png" mode=""></image>
							<view class="avator">
								<image :src="rq.imgUrl(firstUser.user?firstUser.user.avatar:'')" mode="aspectFill">
								</image>
							</view>
							<view class="name">{{firstUser.user?firstUser.user.nickname:''}}</view>
							<view class="money">{{firstUser.total?firstUser.total:0}} <span
									style="font-size: 10px;">元</span></view>
						</view>
						<view class="rank third-rank" v-if="thirdUser.id || thirdUser.user_id">
							<image class="ranking-image" src="https://pw.qyang.cc/static/ranking3.png" mode=""></image>
							<view class="avator">
								<image :src="rq.imgUrl(thirdUser.user?thirdUser.user.avatar:'')" mode="aspectFill">
								</image>
							</view>
							<view class="name">{{thirdUser.user?thirdUser.user.nickname:''}}</view>
							<view class="money">{{thirdUser.total?firstUser.total:0}} <span
									style="font-size: 10px;">元</span></view>
						</view>
					</view>
					<view class="box">
						<!-- 显示其余排名的用户 -->
						<scroll-view class="scroll" direction="vertical" @scrolltolower="scrolltolower">
							<view class="other-rank" v-for="(item, index) in otherUserList" :key="index">
								<view class="index">
									{{index + 4}}
								</view>
								<view class="avator">
									<image :src="rq.imgUrl(item.user.avatar)" mode="aspectFill"></image>
								</view>
								<view class="right">
									<view class="l1">
										<view>{{item.user.nickname}}</view>
										<view class="l1-sex1" v-if="item.user.gender == 1">
											<image src="https://pw.qyang.cc/static/sexW.png"
												style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
											{{item.user.age?item.user.age:0}}
										</view>
										<view class="l1-sex2" v-if="item.user.gender == 0">
											<image src="https://pw.qyang.cc/static/sexM.png"
												style="width: 20rpx;height: 20rpx; margin-right: 10rpx;"></image>
											{{item.user.age?item.user.age:0}}
										</view>
										<view class="city">{{item.user.city?item.user.city:''}}</view>
										<view class="money">{{item.total}}<span style="font-size: 10px;">元</span>
										</view>
									</view>
									<view v-if="item.user.ptpj" class="l2">
										<span
											style="font-size: 14px;color: #FF6C91;letter-spacing: 0px;margin-right: 10rpx;">Miss:</span>{{item.user.ptpj}}
									</view>
									<view v-else-if="item.user.bio" class="l2">
										<span
											style="font-size: 14px;color: #FF6C91;letter-spacing: 0px;margin-right: 10rpx;"></span>{{item.user.bio}}
									</view>
									<view v-else class="l2">
										TA很懒，什么也没有留下
									</view>
									<view class="user-tabs" v-if="item.user.task&&item.user.task.length>0">
										<view class="tabs-item" v-for="i,a in item.user.task" :key="a"
											:style="{background:i.color}">
											{{i.name}}
										</view>
									</view>
								</view>

							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="pickerShow" :columns="columns" @cancel="pickerShow = false"
			@confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				statusBarHeight1: 0,
				isSelected: 0,
				pickerShow: false,
				columns: [
					[]
				],
				tablist: [{
					name: '富豪榜'
				}, {
					name: '达人榜'
				}, {
					name: '邀请榜'
				}],
				userList: [],
				firstUser: {}, // 存放第一名用户数据的对象
				secondUser: {}, // 存放第二名用户数据的对象
				thirdUser: {},
				otherUserList: [],
				api: 'Ranking/index',
				params: {
					page: 1
				},
				total: 0
			};
		},
		onReachBottom() {

		},
		onPullDownRefresh() {
			this.params.page = 1
			this.getList(this.api)
			uni.hideNavigationBarLoading()
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					// 假设自定义导航包含状态栏高度以及额外设置的导航栏部分高度（比如44px，具体根据实际样式设定）
					this.statusBarHeight = res.statusBarHeight * 1 + 46;
					this.statusBarHeight1 = res.statusBarHeight;
				},
			});
			for (let i = 1; i <= 12; i++) {
				this.columns[0].push(i + '月')
			}
			console.log(this.columns)
			this.getList(this.api)
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			scrolltolower() {
				if (this.userList.length < this.total) {
					this.params.page++
					this.getList(this.api, true)
				}
			},
			pickerConfirm(e) {
				this.params.month = e.indexs[0] + 1
				this.params.page = 1
				this.getList(this.api)
				this.pickerShow = false
			},
			getList(api, more) {
				if (api) {
					this.rq.getData(api, this.params).then(res => {
						this.total = res.data.total
						this.userList = more ? [...this.userList, res.data.data] : res.data.data
						// 提取第一名用户数据
						this.firstUser = this.userList[0] ? this.userList[0] : {
							id: null,
							user_id: null
						};
						// 提取第二名用户数据
						this.secondUser = this.userList[1] ? this.userList[1] : {
							id: null,
							user_id: null
						};
						// 提取第三名用户数据
						this.thirdUser = this.userList[2] ? this.userList[2] : {
							id: null,
							user_id: null
						};
						// 取出其余用户数据放入 otherUserList 数组，从索引3开始到最后
						this.otherUserList = this.userList.slice(3);
						uni.stopPullDownRefresh()
					}).catch(() => {
						uni.stopPullDownRefresh()
					})
				}
			},
			selectTab(index) {

				this.isSelected = index;
				this.firstUser = {
					id: null,
					user_id: null
				}
				this.secondUser = {
					id: null,
					user_id: null
				}
				this.thirdUser = {
					id: null,
					user_id: null
				}
				this.api = index === 0 ? 'Ranking/index' : index === 1 ? 'Ranking/star' : index === 2 ? 'Ranking/invite' :
					''
				this.params.page = 1
				this.getList(this.api, false)
			},
		}
	}
</script>

<style lang="scss">
	.content {
		// width: 375rpx;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		opacity: 1;
		background: linear-gradient(180deg, #F7635C -3%, #F7635C 25%, rgba(255, 153, 156, 0) 100%);
		padding: 0 20rpx;

		.tab {
			position: relative;
			height: 85vh;
			margin: auto;
			display: flex;
			flex-direction: column;

			.card {
				// width: 345px;
				display: flex;
				flex-direction: column;
				flex: 1;
				border-radius: 28rpx;
				opacity: 1;
				margin: 0 20rpx;
				background: #FFFFFF;

				.box {
					overflow: hidden;
					flex: 1;

					.other-rank {
						display: flex;
						padding-bottom: 20rpx;

						.index {
							font-family: Alibaba PuHuiTi 2.0;
							font-size: 28rpx;
							font-weight: 500;
							line-height: 28rpx;
							letter-spacing: 0rpx;

							color: #FF7681;
							display: flex;
							padding: 30rpx 20rpx;
						}

						.avator {
							image {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
							}
						}

						.right {
							margin-left: 20rpx;
						}

						.l1 {
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							margin-bottom: 10rpx;

							font-family: Alibaba PuHuiTi 2.0;
							font-size: 28rpx;
							font-weight: 500;
							line-height: 28rpx;
							letter-spacing: 0rpx;

							color: #333333;
							position: relative;
							width: 500rpx;

							.l1-sex1 {
								width: 84rpx;
								height: 32rpx;
								border-radius: 176rpx;
								opacity: 1;
								background: rgba(116, 220, 254, 0.2);

								font-size: 22rpx;
								font-weight: 500;
								line-height: 30rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								letter-spacing: 0rpx;
								color: #2BC1F1;
								line-height: 32rpx;
								margin-left: 15rpx;

							}

							.l1-sex2 {
								width: 84rpx;
								height: 32rpx;
								border-radius: 176rpx;
								opacity: 1;

								background: rgba(253, 168, 175, 0.2);

								font-size: 22rpx;
								font-weight: 500;
								line-height: 30rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								letter-spacing: 0rpx;
								color: #FDA8AF;
								line-height: 32rpx;
								margin-left: 15rpx;
							}

							.city {
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 24rpx;
								letter-spacing: 0rpx;

								font-variation-settings: "opsz" auto;
								color: #999999;
								margin-left: 15rpx;
							}

							.money {
								font-family: 阿里巴巴普惠体;
								font-size: 20rpx;
								font-weight: normal;
								line-height: 30rpx;
								text-align: right;
								display: flex;
								align-items: center;
								letter-spacing: 0rpx;

								color: #FF5866;

								/* 9000 */
								font-family: 阿里巴巴普惠体;
								font-weight: 400;
								font-size: 32rpx;
								padding: 10rpx 0;
								margin-left: auto;
							}
						}

						.l2 {
							font-family: PingFang SC;
							font-size: 22rpx;
							font-weight: normal;
							line-height: 38rpx;
							letter-spacing: 2rpx;
							color: #000000;
							margin-bottom: 10rpx;
							overflow: hidden;
							/* 超出元素宽度的内容隐藏起来 */
							text-overflow: ellipsis;
							/* 当文本溢出时显示省略号 */
							white-space: nowrap;
						}

						.user-tabs {
							display: flex;
							flex-wrap: wrap;
							height: 44rpx;
							overflow: hidden;

							.tabs-item {
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 36rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								letter-spacing: 0rpx;
								color: #FFFFFF;
								width: 118rpx;
								height: 44rpx;
								border-radius: 40rpx;
								opacity: 1;
								background: #FF6C91;
								margin-right: 10rpx;
							}
						}
					}
				}

				.title {
					display: flex;
					height: 320rpx;
					padding-top: 20rpx;
					position: relative;
					overflow: hidden;

					.bg-image {
						// width: 319px;
						width: 100%;
						height: 152rpx;
						position: absolute;
						z-index: 0;
						top: 40%;
						// left: 3%;
					}

					.top-rank {
						margin-left: 70rpx;
						margin-top: 20rpx;

						.ranking-image {
							width: 82rpx;
							height: 80rpx;
							position: absolute;
							top: -40rpx;
							left: -30rpx;
						}
					}

					.second-rank {
						margin-left: 60rpx;
						margin-top: 40rpx;

						.ranking-image {
							width: 82rpx;
							height: 80rpx;
							position: absolute;
							top: -40rpx;
							left: -30rpx;
						}
					}

					.third-rank {
						margin-left: 80rpx;
						margin-top: 40rpx;

						.ranking-image {
							width: 82rpx;
							height: 80rpx;
							position: absolute;
							top: -40rpx;
							left: -30rpx;
						}
					}

					.rank {
						display: flex;
						align-items: center;
						flex-direction: column;
						z-index: 1;
						width: 128rpx;
						position: relative;

						.avator {
							image {
								width: 128rpx;
								height: 128rpx;
								border-radius: 50%;
								overflow: hidden;
							}

						}

						.name {
							font-family: Alibaba PuHuiTi 2.0;
							font-size: 26rpx;
							font-weight: 500;
							line-height: 32rpx;
							text-align: center;
							letter-spacing: 0px;
							color: #333333;
							margin-bottom: 12rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.money {
							font-family: 阿里巴巴普惠体;
							font-size: 32rpx;
							font-weight: normal;
							line-height: 30rpx;
							text-align: center;
							letter-spacing: 0px;
							color: #FF5866;
							font-family: 阿里巴巴普惠体;
							font-weight: 400;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

						}

					}
					.top-rank{
						.name {
							margin-top: 22rpx;
						}
					}
				}
			}

			.text {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 30rpx;
				letter-spacing: 0rpx;
				color: #FFFFFF;
				margin: 30rpx;

				.con {}

				.time {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
			}

			.tabs {
				// background-color: #ffffff;
				display: flex;
				justify-content: center;
				height: 60rpx;

				.tabs-1 {
					flex: 1;
					justify-content: center;
					align-items: center;
					display: flex;

					font-size: 28rpx;
					font-weight: normal;
					line-height: 30rpx;
					letter-spacing: 0rpx;

					color: #ffffff;
				}

				.tabs-1.active {
					position: relative;
					font-size: 30rpx;
					font-weight: 600;
					line-height: 30rpx;
					letter-spacing: 0rpx;
					transition: all 0.3s ease;
					color: #ffffff;
				}

				.tabs-1.active::after {
					border-radius: 6rpx;
					opacity: 1;
					background: #ffffff;
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 55rpx;
					height: 6rpx;
					transition: width 0.3s ease, opacity 0.3s ease;
				}
			}
		}
	}

	.header {
		width: 100%;
		height: auto;
		// display: table;
		// position: fixed;
		top: 0rpx;
		left: 0rpx;
		z-index: 10;

		.header-back {
			margin-left: 10rpx;
			height: 26rpx;
			line-height: 26rpx;
			position: absolute;
			left: 0;
			color: #FFFFFF;
		}

		.hearder-content {
			font-size: 32rpx;
			font-weight: normal;
			line-height: 56rpx;
			text-align: center;
			display: flex;
			align-items: center;
			letter-spacing: 0rpx;
			color: #FFFFFF;
		}

		.navon {
			width: 100%;
			height: auto;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}
</style>